<template>
	<div class="manage">
		<el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
			<!-- <common-form :formLabel="operateFormLabel" :form="operateForm" :inline="true" ref="uform"></common-form> -->
			<el-form label-width="160px" :model="operateForm" ref="uform" :inline="true">
				<el-form-item label="账号" prop="userName">
				  <el-input autocomplete='off'
				    v-model="operateForm.userName"
				    placeholder="请输入账号"
				  />
				</el-form-item>
				<el-form-item label="密码" prop="password">
				  <el-input auto-complete="new-password" type="password" v-model="operateForm.password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="昵称" prop="nickName">
				  <el-input v-model="operateForm.nickName" placeholder="请输入昵称" />
				</el-form-item>
				<el-form-item label="电子邮箱" prop="email">
				  <el-input v-model="operateForm.email" placeholder="请输入电子邮箱" />
				</el-form-item>
				<el-form-item label="电话" prop="phonenumber">
				  <el-input v-model="operateForm.phonenumber" placeholder="请输入电话" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
				  <el-select v-model="operateForm.sex" placeholder="请选择" @change="handleSelectChange" style="width: 200px;">
					  <el-option v-for="item in dicts['sys_user_sex']" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="角色" prop="roleIds">
				  <el-select multiple v-model="operateForm.roleIds" placeholder="请选择" @change="handleSelectChange" style="width: 200px;">
					  <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="部门" prop="deptId">
				  <treeselect style="width: 200px;"
				    v-model="operateForm.deptId"
				    :options="dept2Options"
				    :normalizer="normalizer"
				    :show-count="true"
				    placeholder="选择部门"
				  />
				</el-form-item>
				<el-form-item label="岗位">
				  <el-select multiple v-model="operateForm.postIds" placeholder="请选择" @change="handleSelectChange" style="width: 200px;">
					  <el-option v-for="item in posts" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm">确定</el-button>
				<el-button @click="isShow = false">取消</el-button>
			</div>
		</el-dialog>
		
		<el-row :gutter="20">
			<el-col :span="4" :xs="24">
				<div class="head-container">
				  <el-tree
					:data="deptOptions"
					:props="defaultProps"
					:expand-on-click-node="false"
					:filter-node-method="filterNode"
					ref="tree"
					default-expand-all
					@node-click="handleNodeClick"
				  />
				</div>
			</el-col>
			<el-col :span="20" :xs="24">
				<el-form style="width: 100%;" label-width="100px" :model="searchForm" ref="sform" inline>
					<el-button type="primary" @click="addHandler">+ 新增</el-button>
					<div style="float: right;">
						<el-form-item label="账号">
							<el-input v-model="searchForm.userName" placeholder="请输入账号" clearable></el-input>
						</el-form-item>
						<el-form-item label="电话">
							<el-input v-model="searchForm.phonenumber" placeholder="请输入电话" clearable></el-input>
						</el-form-item>
						<el-button  type="primary" @click="getList(searchForm.userName,searchForm.phonenumber)">搜索</el-button>
					</div>
				</el-form>
				<common-table :tableData="tableData" :tableLabel="tableLabel" :config="config"
				@changePage="getList()" @edit="editUserHandler" @del="delUserHandler"></common-table>
			</el-col>
		</el-row>
		
<!-- 		<div class="manage-header">

		</div> -->

	</div>
</template>

<script>
import CommonForm from '/src/components/CommonForm.vue'
import CommonTable from '/src/components/CommonTable.vue'
import { getUserList,getUser,updateUser,addUser,delUser } from '/api/userapi.js'
import { listDictData } from "/api/dictdata.js"
import { treeselect,getDeptList } from "/api/deptapi.js"
import { getRoleList } from '/api/roleapi.js'
import { listPost } from "/api/postapi";
import { handleTree } from '/utils/listUtils.js'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
	name: 'user',
	components:{
		CommonForm,
		CommonTable,
		Treeselect
	},
	data(){
		return {
			operateType: 'add',
			isShow: false,
			operateFormLabel: [
				{
					model: 'userName',
					label: '账号',
					type: 'input'
				},
				{
					model: 'password',
					label: '密码',
					type: 'password'
				},
				{
					model: 'nickName',
					label: '昵称',
					type: 'input'
				},
				{
					model: 'email',
					label: '电子邮箱',
					type: 'input'
				},
				{
					model: 'phonenumber',
					label: '电话',
					type: 'input'
				},
				{
					model: 'sex',
					label: '性别',
					type: 'select',
					opts: [
						{
							label: '男',
							value: '1'
						},
						{
							label: '女',
							value: '0'
						}
					]
				},
				{
					model: 'roleId',
					label: '角色',
					type: 'select',
					opts: []
				},
				{
					model: 'deptId',
					label: '部门',
					type: 'select',
					opts: []
				},
			],
			dicts: [],
			roles: [],
			posts: [],
			dept2Options: [],
			depts: [],
			operateForm:{
				userName: '',
				password: '',
				nickName: '',
				email: '',
				phonenumber: '',
				sex: '',
				roleIds: [],
				deptId: ''
			},
			searchForm:{
				userName: '',
				phonenumber: '',
				deptId: ''
			},
			tableData: [],
			tableLabel: [
				{
					prop: "userName",
					label: "账号",
					width: "10%",
				},
				{
					prop: "nickName",
					label: "昵称",
					width: "20%",
				},
				{
					prop: "phonenumber",
					label: "电话",
					width: "20%",
				},
				{
					prop: "deptName",
					label: "部门",
					width: "20%",
				},
				{
					prop: "loginIp",
					label: "最后登录IP",
					width: "10%",
				},
				{
					prop: "loginDate",
					label: "最后登录时间",
					width: "20%",
				},
			],
			config: {
				page: 1,
				size: 10,
				total: 0
			},
			// 部门树选项
			deptOptions: undefined,
			defaultProps: {
			  children: "children",
			  label: "label"
			},
		}
	},
	methods:{
		confirm(){
			if(this.operateType === 'edit'){
				updateUser(this.operateForm).then(res => {
					this.isShow=false
					this.getList()
				})
			}
			else{
				addUser(this.operateForm).then(res => {
					this.isShow=false
					this.getList()
				})
			}
		},
		addHandler(){
			this.isShow = true
			this.operateType = 'add'
			this.operateForm = {
				userName: '',
				password: '',
				nickName: '',
				email: '',
				phonenumber: '',
				sex: '',
				roleIds: [],
				postIds: [],
			}
		},
		getList(userName = '', phonenumber ='', deptId=''){
			this.config.loading = true
			userName ? (this.config.page = 1) : ''
			getUserList({
				pageNum: this.config.page,
				pageSize: this.config.size,
				userName,
				phonenumber,
				deptId
			}).then( res =>{
				let data = res.data
				
				this.tableData = data.rows.map(item => {
					item.sexLabel = item.sex == '0' ? "女" : "男" 
					return item
				})
				// alert(JSON.stringify(data))
				this.config.total = data.total
				this.config.loading = false
			})
		},
		/** 转换菜单数据结构 */
		normalizer(node) {
		  if (node.children && !node.children.length) {
		    delete node.children;
		  }
		  return {
		    id: node.deptId,
		    label: node.deptName,
		    children: node.children
		  };
		},
		getDicts(dictType){
			let type = dictType.split(',')
			for(let i=0;i<type.length;i++){
				listDictData({dictType: type[i]}).then(res=>{
					let labels = []
					let dicts = res.data.rows
					dicts.forEach(t=>{
						let item = {
							label: t.dictLabel,
							value: t.dictValue
						}
						labels.push(item)
					})
					this.dicts[type[i]]=labels
				})
			}
		},
		getRoles(){
			getRoleList().then(res=>{
				let roleLabels = []
				let data = res.data
				data.rows.forEach(t=>{
					let item = {
						label: t.roleName,
						value: t.roleId
					}
					roleLabels.push(item)
				})
				this.roles=roleLabels
			})
		},
		getDepts(){
			getDeptList().then(response => {
			  this.dept2Options = [];
			  let data = response.data.data
			  let res = handleTree(data, "deptId","parentId","children");
			  this.dept2Options.push(res[0]);
			});
		},
		getPosts(){
			listPost().then(res=>{
				let postLabels = []
				let data = res.data;
				data.rows.forEach(t=>{
					let item = {
						label: t.postName,
						value: t.postId
					}
					postLabels.push(item)
				})
				this.posts=postLabels
			});
		},
		editUserHandler(row){
			const userId = row.userId || this.ids;
			getUser(userId).then(response => {
			  this.operateForm = response.data.data;
			  this.operateForm.roleIds = response.data.roleIds;
			  this.operateForm.postIds = response.data.postIds;
			  this.operateType = 'edit'
			  this.isShow = true
			  this.operateForm.password = "";
			});
		},
		delUserHandler(row){
			this.$confirm("此操作将永久删除该用户，是否继续？", "提示",{
				confirmButtonText: "确认",
				cancelButtonText: "取消",
				type: "warning"
			}).then(()=>{
				const id = row.userId
				delUser(id).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功'
					})
					this.getList()
				})
			})
		},
		// 筛选节点
		filterNode(value, data) {
		  if (!value) return true;
		  return data.label.indexOf(value) !== -1;
		},
		// 节点单击事件
		handleNodeClick(data) {
		  this.searchForm.deptId = data.id;
		  this.getList(this.searchForm.userName, this.searchForm.phonenumber, this.searchForm.deptId)
		},
		/** 查询部门下拉树结构 */
		getTreeselect() {
		  treeselect().then(res => {
				let data=res.data.data
				this.deptOptions = data;
		  });
		},
		handleSelectChange(){
			this.$forceUpdate()
		}
	},
	created(){
		this.getList()
		this.getDicts('sys_user_sex,sys_show_hide')
		this.getRoles()
		this.getDepts()
		this.getPosts()
		this.getTreeselect()
	}
}
</script>

<style>
.manage-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>